import React, { FC, useState } from 'react'
import { View, Button } from '@tarojs/components'
import { AtTextarea } from 'taro-ui'
import Taro, { useRouter } from '@tarojs/taro'
import Photograph from '@/components/Photograph/index'
import api from '@/services/config/index'
import { showToast } from '@/utils/common'

import './index.scss'

const PubDisputes: FC = () => {
  const [description, setDescription] = useState<string>('')
  const [fileList, setFileList] = useState<Array<{ uploadUrl: string; url: string }>>([])
  const { params } = useRouter()
  function addDispute() {
    if (!description) {
      showToast('纠纷理由不能为空')
      return
    } else if (fileList.length <= 0) {
      showToast('上传凭证不能为空')
      return
    }
    // 将上传的图片地址转换成以逗号拼接的形式
    let picture = ''
    fileList.map((item) => {
      picture += item.uploadUrl + ','
    })
    picture = picture.substr(0, picture.length - 1)
    api['orderList/addDispute']({
      orderId: params.orderId,
      description,
      picture
    }).then(() => {
      showToast('发布纠纷成功')
      Taro.navigateBack({ delta: 1 })
    })
  }
  return (
    <View className='pubDisputes'>
      <AtTextarea
        className='pubDisputes-txt'
        value={description}
        onChange={(value) => {
          setDescription(value)
        }}
        maxLength={100}
        placeholder='请求输入纠纷理由'
        fixed
        count
        height={320}
      />
      <View className='pubDisputes-title'>上传凭证：</View>
      <Photograph
        fileList={fileList}
        onHandChange={(file) => {
          setFileList(file)
        }}
      ></Photograph>
      <Button className='commmon-btn' onClick={addDispute}>
        发布纠纷
      </Button>
    </View>
  )
}

export default PubDisputes
